<template>
  <div class="submit-dialog-container">
    <el-dialog
      v-model="dialogVisibleModel"
      :title="props.dialogTitle"
      width="500"
      align-center
    >
      <div>
        <!-- 定义插槽--设置表单填写的行数据的内容 -->
        <slot name="rows"></slot>
      </div>
      <!-- 底部dialog插槽 -->
      <template #footer>
        <div>
          <el-button
            type="primary"
            @click="submitFormTest"
            color="rgb(215, 36, 47)"
          >
            测试提交
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>

        <div class="dialog-footer">
          <el-button @click="cancelHandle">取消</el-button>
          <el-button
            type="primary"
            @click="submit"
            color="rgb(215, 36, 47)"
            v-loading.fullscreen.lock="submitLoading"
          >
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
/*
  Document
  -本组件为提交表单，设置一个具名插槽:columns
  进行列内数据的填写
  插槽内如果需要保留 table对应的 数据内容，则需要进行如下操作
  使用el-form-item，其中需要指定prop，用于对element的如图valid操作的支持，或者使用自定义valid

  Emit:
  submit--提交按钮事件
  debug--调试参数
  
  model:
  使用本组件须知
  -valid的内容默认不实现，等待后续有需要再进行实现
  --dialogVisibleModel的定义
  dialogVisible，弹窗是否显示
  */
import { ref } from "vue";
const emit = defineEmits(["submit", "reset", "debug"]);

// 引用这个dialogForm对象本身
// dialogVisibleModel是否显示
const dialogVisibleModel = defineModel("dialogVisibleModel", {
  default: false,
});

// props属性
const props = defineProps({
  dialogTitle: {
    default: "填写中",
  },
});

/**
 * 提交表单
 */
const submitFormTest = () => {
  // MARK 网络请求发起 Emit
  // 发送提交请求
  emit("submit");
};

/**
 * 取消按钮处理器
 */
const cancelHandle = () => {
  dialogVisibleModel.value = false;
};

/**
 * 重置按钮处理器
 */
const resetForm = () => {
  emit("reset");
};

/**
 * 是否显示等待遮罩
 */
const submitLoading = ref(false);

/**
 * 提交表单并且重置
 */
const submit = () => {
  // 进入加载
  submitLoading.value = true;
  // MARK 网络请求发起
  //   设置Emit 发送http
  emit("submit");
  // 不建议在此处进行reset，因为emit执行的方法是异步的，无法确认顺序，连续 发送会产生数据丢失
  // 加载遮罩必然消失
  // 延迟消失
  setTimeout(() => {
    submitLoading.value = false;
  }, 250);
};
</script>

<style lang="scss">
.submit-dialog-container {
}
</style>
